<template>
  <md-nav-bar title="历史榜单" backgroundColor="#ffffff" />
  <view class="history-rank-container">
    <!-- 顶部tab -->
    <view class="history-rank-tab">
      <view class="tab-title">历史榜单</view>
      <view class="tab-underline"></view>
      <view class="rank-type-select">
        <uni-data-select
          class="rank-type-btn"
          v-model="rankType"
          :localdata="range"
          :clear="false"
          @change="onChangeRankType"></uni-data-select>
      </view>
    </view>

    <!-- 历史榜单列表 -->
    <view class="history-list">
      <md-page-list :api="api.TopList.historyList" :params="{ dateType: rankType }" @change="pageChange" ref="pageRef">
        <view v-for="(item, idx) in data.historyList" :key="idx" class="history-item" @click="onItem(item)">
          <view class="history-date">{{ `${item.startTime.substring(0, 10)} ~ ${item.endTime.substring(0, 10)}` }}</view>
          <uni-icons type="right" />
        </view>
      </md-page-list>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 接口
import api from '@/api';
import type { TopList } from '@/api/data';

const data = reactive({
  historyList: [] as TopList.HistoryList.ListVo[],
});

const range = ref([
  { value: 0, text: '周榜' },
  { value: 1, text: '月榜' },
  { value: 2, text: '季榜' },
  { value: 3, text: '年榜' },
]);
const rankType = ref(0);
const pageRef = ref<any>(null);

function onItem(item: any) {
  uni.navigateTo({
    url: `/pages/sub/topList/rankDetails?id=${item.id}&rankType=${rankType.value}`,
  });
}
function onChangeRankType(val: number) {
  pageRef.value?.onRefresh({ dateType: val });
}

const pageChange = (list: TopList.HistoryList.ListVo[]) => {
  data.historyList = list;
};
</script>

<style lang="scss" scoped>
.history-rank-container {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 32rpx;
}
.history-rank-tab {
  display: flex;
  align-items: center;
  position: relative;
  padding: 24rpx 0 0 24rpx;
  margin-bottom: 8rpx;
  justify-content: space-between;
}
.tab-title {
  font-size: 32rpx;
  color: #222;
  font-weight: 600;
  margin-right: 32rpx;
}
.tab-underline {
  position: absolute;
  left: 66rpx;
  bottom: -8rpx;
  width: 40rpx;
  height: 6rpx;
  background: #1fa37a;
  border-radius: 3rpx;
}
.rank-type-select {
  margin-right: 40rpx;
}
.rank-type-btn {
  background: #fff;
  color: #222;
  font-size: 28rpx;
  border-radius: 24rpx;
  border: 2rpx solid #e0e0e0;
  // padding: 8rpx 32rpx;
  display: flex;
  align-items: center;
}
.arrow {
  font-size: 24rpx;
  margin-left: 8rpx;
}
.history-list {
  margin-top: 24rpx;
}
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30rpx;
  padding: 36rpx 24rpx 36rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fff;
}
.history-date {
  font-size: 30rpx;
  color: #222;
}
.history-arrow {
  font-size: 36rpx;
  color: #bbb;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/common/Stroke%201.png');
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
